<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>头等函数(First-Class Function)</title>
  <!-- 
  JavaScript 中的第一类函数（First-Class Functions）说明
  第一类函数是指在编程语言中，函数被视为第一类对象。这意味着函数可以像其他数据类型一样被处理。

  1. 定义
  - 第一类函数：在 JavaScript 中，函数被视为第一类对象，意味着函数可以被赋值给变量、作为参数传递给其他函数、作为返回值返回，并可以存储在数据结构中。

  2. 特性
  - 可以赋值给变量：函数可以被赋值给变量，从而可以通过变量名来调用函数。
    const greet = function() {
      console.log("你好，世界！");
    };
    greet(); // 输出: 你好，世界！

  - 可以作为参数传递：函数可以作为参数传递给其他函数。
    function executeFunction(fn) {
      fn(); // 调用传入的函数
    }

    executeFunction(function() {
        console.log("执行了传入的函数！");
    });

  - 可以作为返回值：函数可以返回其他函数。
    function outerFunction() {
      return function innerFunction() {
        console.log("这是返回的内部函数！");
      };
    }

    const inner = outerFunction();
    inner(); // 输出: 这是返回的内部函数！

  - 可以存储在数据结构中：函数可以作为值存储在数组或对象中。
    const functionsArray = [
      function() { console.log("函数 1"); },
      function() { console.log("函数 2"); }
    ];

    functionsArray[0](); // 输出: 函数 1

  3. 优势
  - 灵活性：第一类函数使得 JavaScript 具有更高的灵活性，允许使用函数作为数据。
  - 高阶函数：可以创建高阶函数，即接受函数作为参数或返回函数的函数。

  4. 应用场景
  - 回调函数：在异步编程中，常用回调函数来处理事件或操作完成后的逻辑。
    setTimeout(function() {
      console.log("延迟执行的回调函数");
    }, 1000);

  - 函数组合：可以将多个函数组合在一起，形成更复杂的功能。

  5. 注意事项

  - 作用域：使用第一类函数时，注意作用域和闭包的概念，以避免变量冲突或意外的行为。
  - 性能：过多的函数嵌套可能会影响性能，尤其是在大规模应用中。

  总结
  JavaScript 中的第一类函数是语言的一大特性，使得函数能够被灵活地处理和使用。
    -->
</head>
<body>

  <script>

    // 1. 函数可以作为参数传递给其他函数
    function sayHello() {
      console.log("你好，世界！");
    }

    function executeFunction(fn) {
      fn(); // 调用传入的函数
    }

    executeFunction(sayHello); // 输出: 你好，世界！

    // 函数可以作为返回值
    function outerFunction() {
      return function innerFunction() {
        console.log("这是返回的内部函数！");
      }
    }

    const inner = outerFunction();
    inner(); // 输出: 这是返回的内部函数！

    // 2. 函数可以作为数据结构的一部分
    const functionsArray = [
      function() { console.log("函数 1"); },
      function() { console.log("函数 2"); }
    ];

    functionsArray[0](); // 输出: 函数 1

    // 3. 函数可以作为对象的属性
    const obj = {
      name: "对象",
      sayHello: function() {
        console.log("你好，" + this.name);
      }
    };

    obj.sayHello(); // 输出: 你好，对象

    // 4. 延迟执行的回调函数
    setTimeout(function() {
      console.log("延迟执行的函数！");
    })

    // 5. 函数作为参数传递给其他函数
    function add(a, b) {
      return a + b;
    }

    function multiply(a, b, callback) {
      const result = a * b;
      callback(result);
    }

    multiply(2, 3, function(result) {
      console.log("乘法结果: " + result);
    }); // 输出: 乘法结果: 6

    // 6. 函数赋值
    const myFunction = function() {
      console.log("这是一个函数赋值！");
    }

    const fooFn = myFunction;
    fooFn(); // 输出: 这是一个函数赋值！
    
  </script>
  
</body>
</html>